<template>
<div class="app-container calendar-list-container">
<el-row>
  <el-col :span="6" style='margin-top:15px;'>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <el-tree
      class="filter-tree"
      :data="treeData"
      node-key="id"
      highlight-current
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="deptTree"
      @node-click="getNodeData"
      default-expand-all
      >
    </el-tree>
  </el-col>
  <el-col :span="16" style='margin-top:15px;'>
    <el-card class="box-card">
        <span>角色列表</span>
      <role-element :deptId='currentId' :platformId='platformId' ref="roleElement"></role-element>
    </el-card>
  </el-col>
</el-row>
  </div>
</template>

<script>
import { addObj, putObj } from '@/api/admin/role/index'
import { fetchTree, getDeptObj } from '@/api/admin/dept/index'
import { mapGetters } from 'vuex'
export default {
  name: 'menu',
  components: {
    'role-element': () => import('./components/role')
  },
  data() {
    return {
      dialogRoleFormVisible: false,
      dialogRole: '新增角色',
      filterText: '',
      list: null,
      total: null,
      formAdd: true,
      formStatus: '',
      showElement: false,
      typeOptions: ['menu', 'dirt'],
      listQuery: {
        name: undefined
      },
      treeData: [],
      queryTree: {
        userType: '',
        platformId: ''
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      labelPosition: 'right',
      form: {
        code: undefined,
        title: undefined,
        parentId: undefined,
        href: undefined,
        icon: undefined,
        orderNum: undefined,
        description: undefined,
        path: undefined,
        enabled: undefined,
        type: undefined,
        attr1: undefined
      },
      currentId: -1,
      platformId: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.deptTree.filter(val)
    }
  },
  created() {
    this.getList()
  },
  computed: {
    ...mapGetters([
      'elements',
      'userType',
      'platformId'
    ])
  },
  methods: {
    getList() {
      this.queryTree.userType = this.userType
      this.queryTree.platformId = this.platformId
      fetchTree(this.queryTree).then(data => {
        this.treeData = data
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    getNodeData(data) {
      this.currentId = data.id
      console.log(data)
      getDeptObj(data.id).then(response => {
        this.form = response.data
        this.platformId = response.data.platformId
        this.showElement = true
        this.$refs.roleElement.deptId = data.id
        console.log('-=-==-=-=-=-=-=-=-=-=-=-=-')
        console.log(this.platformId)
        this.$refs.roleElement.platformId = this.platformId
        this.$refs.roleElement.getList()
      })
    },
    update() {
      putObj(this.form.id, this.form).then(() => {
        this.getList()
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    create() {
      addObj(this.form).then(() => {
        this.getList()
        this.$notify({
          title: '成功',
          message: '创建成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    resetForm() {
      this.form = {
        code: undefined,
        title: undefined,
        parentId: this.currentId,
        href: undefined,
        icon: undefined,
        orderNum: undefined,
        description: undefined,
        path: undefined,
        enabled: undefined
      }
    }
  }
}
</script>

